<template>
  <div class="main">
    <banner-comp height="470"></banner-comp>

    <div class="row-1">
      <div class="w1300">
        <div class="group-item">
          <div class="title-wrap">
            <h2>introduce</h2>
            <router-link to="">
              查看更多
              <el-icon><ArrowRight /></el-icon>
            </router-link>
          </div>
          <div
            class="content"
            v-html="
              `某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组某某某的课题组`
            "
          ></div>
        </div>
      </div>
    </div>
    <div class="row-2 bgc-f8">
      <div class="w1300">
        <div class="group-item">
          <div class="title-wrap">
            <h2>member</h2>
            <router-link to="">
              查看更多
              <el-icon><ArrowRight /></el-icon>
            </router-link>
          </div>
          <div class="content">
            <member :data="[0, 1, 2, 3, 4, 5, 6]"></member>
          </div>
        </div>
      </div>
    </div>
    <div class="row-3">
      <div class="w1300">
        <div class="group-item">
          <div class="title-wrap">
            <h2>Latest News</h2>
            <router-link to="">
              查看更多
              <el-icon><ArrowRight /></el-icon>
            </router-link>
          </div>
          <div class="content">
            <el-row :gutter="20">
              <el-col :span="12" v-for="item in 6" :key="item">
                <news></news>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>

    <div class="row-3 bgc-f8">
      <div class="w1300">
        <div class="group-item">
          <div class="title-wrap">
            <h2>RESEARCH</h2>
            <router-link to="">
              查看更多
              <el-icon><ArrowRight /></el-icon>
            </router-link>
          </div>
          <div class="content">
            <el-row>
              <el-col :span="24" v-for="item in 6" :key="item">
                <news></news>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import BannerComp from '@/components/banner/banner.vue'
import Member from '@/pages/topic/components/member.vue'
import { reqGetHomeData } from '@/pages/topic/api/api.ts'

import { onMounted } from 'vue'
import { useCommon } from '@/pages/topic/composables/common.ts'
import News from '@/pages/topic/components/news.vue'

const { setThemBgc } = useCommon()
onMounted(() => {
  getHomeData()
  setThemBgc('#B80450')
})

const getHomeData = async () => {
  await reqGetHomeData(1)
}
</script>

<style scoped lang="scss">
.bgc-f8 {
  background-color: #f8f8f8;
}
.group-item {
  padding: 50px 0;
  .title-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 37px;
    > h2 {
      font-size: 34px;
    }
    > a {
      display: flex;
      align-items: center;
      font-size: 16px;
    }
  }
}
</style>
@/pages/topic/api/api
